﻿<!DOCTYPE html>
<html><head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Katniss Premium Admin Template</title>
<link type="text/css" href="css/style.default.css" rel="stylesheet">
<link type="text/css" href="css/prettify.css" rel="stylesheet">

<script src="js/prettify.js" type="text/javascript"></script>
    <script src="js/jquery-1.9.0.js"></script>
<script src="js/jquery-ui-1.10.0.custom.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/jquery.cookie.js"></script>
    <script src="js/custom.js"></script>

<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="js/excanvas.min.js"></script><![endif]-->
</head>

<body>

<div class="mainwrapper" style="background-position: 0px 0px;">
	
    <!-- START OF LEFT PANEL -->
    <div class="leftpanel" style="margin-left: 0px;">
    	
        <div class="logopanel animate0 fadeInUp">
        	<h1><a href="dashboard.html">Training managemet <span>v1.0</span></a></h1>
        </div><!--logopanel-->
        
        <div class="datewidget animate1 fadeInUp">Today is Tuesday, Dec 25, 2012 5:30pm</div>
    
    	<div class="searchwidget animate2 fadeInUp">
        	<form method="post" action="results.html">
            	<div class="input-append">
                    <input type="text" placeholder="Search here..." class="span2 search-query">
                    <button class="btn" type="submit"><span class="icon-search"></span></button>
                </div>
            </form>
        </div><!--searchwidget-->
        
        <div class="plainwidget animate3 fadeInUp">
        	<small>Using 16.8 GB of your 51.7 GB </small>
        	<div class="progress progress-info">
                <div style="width: 20%" class="bar"></div>
            </div>
            <small><strong>38% full</strong></small>
        </div><!--plainwidget-->
        
        <div class="leftmenu">        
            <ul class="nav nav-tabs nav-stacked">
            	<li class="nav-header animate4 fadeInUp">Main Navigation</li>
                <li class="active animate5 fadeInUp"><a href="dashboard.html"><span class="icon-align-justify"></span> Dashboard</a></li>
                <li class="animate6 fadeInUp"><a href="media.html"><span class="icon-picture"></span> Media</a></li>
                <li class="dropdown animate7 fadeInUp"><a href=""><span class="icon-briefcase"></span> UI Elements &amp; Widgets</a>
                	<ul>
                    	<li><a href="elements.html">Theme Components</a></li>
                        <li><a href="bootstrap.html">Bootstrap Components</a></li>
                    </ul>
                </li>
                <li class="dropdown animate8 fadeInUp"><a href=""><span class="icon-th-list"></span> Tables</a>
                	<ul>
                    	<li><a href="table-static.html">Static Table</a></li>
                        <li><a href="table-dynamic.html">Dynamic Table</a></li>
                    </ul>
                </li>
                <li class="animate9 fadeInUp"><a href="typography.html"><span class="icon-font"></span> Typography</a></li>
                <li class="animate10 fadeInUp"><a href="charts.html"><span class="icon-signal"></span> Graph &amp; Charts</a></li>
                <li class="animate11 fadeInUp"><a href="messages.html"><span class="icon-envelope"></span> Messages</a></li>
                <li class="animate12 fadeInUp"><a href="buttons.html"><span class="icon-hand-up"></span> Buttons &amp; Icons</a></li>
                <li class="dropdown animate13 fadeInUp"><a href=""><span class="icon-pencil"></span> Forms</a>
                	<ul>
                    	<li><a href="forms.html">Form Styles</a></li>
                        <li><a href="wizards.html">Wizard Form</a></li>
                        <li><a href="wysiwyg.html">WYSIWYG</a></li>
                    </ul>
                </li>
                <li class="animate14 fadeInUp"><a href="calendar.html"><span class="icon-calendar"></span> Calendar</a></li>
                <li class="animate15 fadeInUp"><a href="animations.html"><span class="icon-play"></span> Animations</a></li>
                <li class="dropdown animate16 fadeInUp"><a href=""><span class="icon-book"></span> Other Pages</a>
                	<ul>
                    	<li><a href="404.html">404 Error Page</a></li>
                        <li><a href="invoice.html">Invoice Page</a></li>
                        <li><a href="editprofile.html">Edit Profile</a></li>
                        <li><a href="grid.html">Grid Styles</a></li>
                    </ul>
                </li>
            </ul>
        </div><!--leftmenu-->
        
    </div><!--mainleft-->
    <!-- END OF LEFT PANEL -->
    
    <!-- START OF RIGHT PANEL -->
    <div class="rightpanel" style="margin-left: 260px;">
    	<div class="headerpanel animate1 fadeInUp">
        	<a class="showmenu" href=""></a>
            
            <div class="headerright">
            	<div class="dropdown notification">
                    <a href="/page.html" data-target="#" data-toggle="dropdown" class="dropdown-toggle">
                    	<span class="iconsweets-globe iconsweets-white"></span>
                    </a>
                    <ul class="dropdown-menu">
                    	<li class="nav-header">Notifications</li>
                        <li>
                        	<a href="">
                        	<strong>3 people viewed your profile</strong><br>
                            <img alt="" src="img/thumbs/thumb1.png">
                            <img alt="" src="img/thumbs/thumb2.png">
                            <img alt="" src="img/thumbs/thumb3.png">
                            </a>
                        </li>
                        <li><a href=""><span class="icon-envelope"></span> New message from <strong>Jack</strong> <small class="muted"> - 19 hours ago</small></a></li>
                        <li><a href=""><span class="icon-envelope"></span> New message from <strong>Daniel</strong> <small class="muted"> - 2 days ago</small></a></li>
                        <li><a href=""><span class="icon-user"></span> <strong>Bruce</strong> is now following you <small class="muted"> - 2 days ago</small></a></li>
                        <li class="viewmore"><a href="">View More Notifications</a></li>
                    </ul>
                </div><!--dropdown-->
                
    			<div class="dropdown userinfo">
                    <a href="/page.html" data-target="#" data-toggle="dropdown" class="dropdown-toggle">Hi, ThemePixels! <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="editprofile.html"><span class="icon-edit"></span> Edit Profile</a></li>
                        <li><a href=""><span class="icon-wrench"></span> Account Settings</a></li>
                        <li><a href=""><span class="icon-eye-open"></span> Privacy Settings</a></li>
                        <li class="divider"></li>
                        <li><a href="index.html"><span class="icon-off"></span> Sign Out</a></li>
                    </ul>
                </div><!--dropdown-->
    		
            </div><!--headerright-->
            
    	</div><!--headerpanel-->
        <div class="breadcrumbwidget animate2 fadeInUp">
        	<ul class="skins">
                <li><a class="skin-color default" href="default"></a></li>
                <li><a class="skin-color orange" href="orange"></a></li>
                <li><a class="skin-color dark" href="dark"></a></li>
                <li>&nbsp;</li>
                <li class="fixed"><a class="skin-layout fixed" href=""></a></li>
                <li class="wide"><a class="skin-layout wide" href=""></a></li>
            </ul><!--skins-->
        	<ul class="breadcrumb">
                <li><a href="dashboard.html">Home</a> <span class="divider">/</span></li>
                <li class="active">Dashboard</li>
            </ul>
        </div><!--breadcrumbwidget-->
      <div class="pagetitle animate3 fadeInUp">
        	<h1>Dashboard</h1> <span>This is a sample description for dashboard page...</span>
        </div><!--pagetitle-->
        
        <div class="maincontent animate4 fadeInUp">
        	<div class="contentinner content-dashboard">
            	<div class="alert alert-info">
                	<button data-dismiss="alert" class="close" type="button">×</button>
                    <strong>Welcome!</strong> This alert needs your attention, but it's not super important.
                </div><!--alert-->
                
                <div class="row-fluid">
                	<div class="span8">
                    	<ul class="widgeticons row-fluid">
                        	<li class="one_fifth"><a href=""><img alt="" src="img/gemicon/location.png" class=""><span>Maps</span></a></li>
                            <li class="one_fifth"><a href=""><img alt="" src="img/gemicon/image.png" class=""><span>Media</span></a></li>
                            <li class="one_fifth"><a href=""><img alt="" src="img/gemicon/reports.png" class=""><span>Reports</span></a></li>
                            <li class="one_fifth"><a href=""><img alt="" src="img/gemicon/edit.png" class=""><span>New Article</span></a></li>
                            <li class="one_fifth last"><a href=""><img alt="" src="img/gemicon/mail.png" class=""><span>Check Mail</span></a></li>
                        	<li class="one_fifth"><a href=""><img alt="" src="img/gemicon/calendar.png" class=""><span>Events</span></a></li>
                            <li class="one_fifth"><a href=""><img alt="" src="img/gemicon/users.png" class=""><span>Manage Users</span></a></li>
                            <li class="one_fifth"><a href=""><img alt="" src="img/gemicon/settings.png" class=""><span>Settings</span></a></li>
                            <li class="one_fifth"><a href=""><img alt="" src="img/gemicon/archive.png" class=""><span>Archives</span></a></li>
                            <li class="one_fifth last"><a href=""><img alt="" src="img/gemicon/notify.png" class=""><span>Notifications</span></a></li>
                        </ul>
                        
                        <br>
                        
                        <h4 class="widgettitle">Report Summary</h4>
                        <!--widgetcontent-->
                        
                        <!--widgetcontent-->
                        
                        
                    </div><!--span8-->
                    <div class="span4">
                    	<h4 class="widgettitle nomargin">Some Simple Instructions</h4>
                        <div class="widgetcontent bordered">
                        	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                        </div><!--widgetcontent-->
                        
                        <!--widgetcontent-->
                        
                        <!--widgetcontent-->
                        
                        <!--widgetcontent-->
                    </div><!--span4-->
                </div><!--row-fluid-->
            </div><!--contentinner-->
        </div><!--maincontent-->
        
    </div><!--mainright-->
    <!-- END OF RIGHT PANEL -->
    
    <div class="clearfix"></div>
    
    <div class="footer">
    	<div class="footerleft" style="display: block;">Reddot Digital Co.,ltd.</div>
    	<div class="footerright ui-state-error" style="margin-left: 260px;">Error Message</div>
    </div><!--footer-->

    
</div><!--mainwrapper-->
<script type="text/javascript">
    jQuery(document).ready(function () {
								
        // basic chart
        var flash = [[0, 2], [1, 6], [2,3], [3, 8], [4, 5], [5, 13], [6, 8]];
        var html5 = [[0, 5], [1, 4], [2,4], [3, 1], [4, 9], [5, 10], [6, 13]];
			
        function showTooltip(x, y, contents) {
            jQuery('&lt;div id="tooltip" class="tooltipflot"&gt;' + contents + '&lt;/div&gt;').css( {
                position: 'absolute',
                display: 'none',
                top: y + 5,
                left: x + 5
            }).appendTo("body").fadeIn(200);
        }
	
			
        //var plot = jQuery.plot(jQuery("#chartplace2"),
		//	   [ { data: flash, label: "Flash(x)", color: "#fb6409"}, { data: html5, label: "HTML5(x)", color: "#096afb"} ], {
		//	       series: {
		//	           lines: { show: true, fill: true, fillColor: { colors: [ { opacity: 0.05 }, { opacity: 0.15 } ] } },
		//	           points: { show: true }
		//	       },
		//	       legend: { position: 'nw'},
		//	       grid: { hoverable: true, clickable: true, borderColor: '#ccc', borderWidth: 1, labelMargin: 10 },
		//	       yaxis: { min: 0, max: 15 }
		//	   });
		
        //var previousPoint = null;
        //jQuery("#chartplace2").bind("plothover", function (event, pos, item) {
        //    jQuery("#x").text(pos.x.toFixed(2));
        //    jQuery("#y").text(pos.y.toFixed(2));
			
        //    if(item) {
        //        if (previousPoint != item.dataIndex) {
        //            previousPoint = item.dataIndex;
						
        //            jQuery("#tooltip").remove();
        //            var x = item.datapoint[0].toFixed(2),
		//			y = item.datapoint[1].toFixed(2);
						
        //            showTooltip(item.pageX, item.pageY,
		//							item.series.label + " of " + x + " = " + y);
        //        }
			
        //    } else {
        //        jQuery("#tooltip").remove();
        //        previousPoint = null;            
        //    }
		
        //});
		
        //jQuery("#chartplace2").bind("plotclick", function (event, pos, item) {
        //    if (item) {
        //        jQuery("#clickdata").text("You clicked point " + item.dataIndex + " in " + item.series.label + ".");
        //        plot.highlight(item.series, item.datapoint);
        //    }
        //});


        //// bar graph
        //var d2 = [];
        //for (var i = 0; i &lt;= 10; i += 1)
        //d2.push([i, parseInt(Math.random() * 30)]);
			
        //var stack = 0, bars = true, lines = false, steps = false;
        //jQuery.plot(jQuery("#bargraph2"), [ d2 ], {
        //    series: {
        //        stack: stack,
        //        lines: { show: lines, fill: true, steps: steps },
        //        bars: { show: bars, barWidth: 0.6 }
        //    },
        //    grid: { hoverable: true, clickable: true, borderColor: '#bbb', borderWidth: 1, labelMargin: 10 },
        //    colors: ["#06c"]
        //});
		
        // calendar
        jQuery('#calendar').datepicker();


    });
</script>


<div class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" id="ui-datepicker-div"></div></body></html>